<template>
	<view class="flex search align-center">
		<view class="margin-right-sm">
			<slot>
				<text :class="[icon?icon:'cuIcon-search']"></text>
			</slot>
		</view>
		<input 
		:type="showPassword ? 'text' : type" 
		v-model="searchText" 
		:placeholder="holder?holder:'请输入岗位名称进行搜索'" 
		@confirm="handelEmit"
		@blur="handelEmit"
		class="flex-sub"
		/>
		<view v-if="type === 'password'" class="margin-left-sm" @click="togglePasswordVisibility">
			<text :class="showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"></text>
		</view>
	</view>
</template>

<script lang="ts" setup>
import type { Ref } from 'vue';
import { ref } from 'vue';

withDefaults(defineProps<{
	icon?:string,
	holder?:string,
	type?:string
}>(),{
	type:'text'
})

const model = defineModel<string>()//获取组件的v-model数据
const searchText:Ref<string> = ref(model.value?model.value:'')
const showPassword = ref(false)

const togglePasswordVisibility = () => {
  showPassword.value = !showPassword.value
}

const handelEmit = ()=>{
	model.value = searchText.value
}
</script>

<style lang="scss">
.search{
	padding: 20upx;
	border: 1upx solid #eee;
	border-radius: 6upx;
}
</style>